<template>
  <div>
    <div style='width: 100%;height: 100%'>
      <div class='pic'>
        <van-swipe :autoplay="2000" >
          <van-swipe-item v-for="(item, index) in imglist" :key="index">
            <img  style='height:200px;width: 100%' :src="item.src" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class='intro'>
      <van-panel  style="padding-bottom: 10px">
        <div class='title'>百脉泉</div>
        <div class='content' style='margin: 0 12px'>
          <!--<p>-->
            百脉泉位于山东省济南市章丘区，是济南五大泉脉之一，与趵突泉齐名并列，是中国北方独具特色的泉景公园。“百脉寒泉珍珠滚”，百脉泉公园因地缘势，沿水之滨，建有儿童乐园区、名泉水景区、花园景树区、幽静学习区、密林散步区、龙泉寺、清照园等。 古代文豪曾巩也曾云：“岱阴诸泉，皆伏地而发，西则趵突为魁，东则百脉为冠。”对百脉泉的奇景赞不绝口。
          <!--</p>-->
        </div>
        <div style='width: 40%;margin:20px 30% 5px' @click='ReadMore'>
          <van-button size="small" style='width:100%;margin: auto'>查看更多</van-button>
        </div>
      </van-panel>
    </div>
    <div class='wenwu'>
      <div class='title' style='font-size: 16px;font-weight:bold;background: white' >
        <div><b>附近停车场</b></div>
        <van-field  v-model="searchKM" placeholder="选择搜索范围(默认1km)" error-message="" readonly @click.native='shownDist();' class='bound-veh-field-picker'/>
      </div>
      <div class='wlist' style=' padding-left: 10px;'>
        <van-cell-group>

          <van-cell v-for="(item,index) in parkList" :title="item.parkName" style='font-size:15px'>
            <div class='icon-group'>
              <div class='icon-iten yuyue' @click='reservePark'  :data-index="index">
                <van-icon name="clock" size="2em" color="#4798FD" />
                <b>预约</b>
              </div>
              <div class='icon-iten daohang' @click="MapDirect" :data-index="index">
                <van-icon name="share" size="2em" color="#4798FD" />
                <b>导航</b>
              </div>
            </div>
          </van-cell>

        </van-cell-group>
      </div>
    </div>
    <!--预约选择弹层-->
    <van-popup v-model="chooseMap" style='border-radius: 8px' >
      <van-list style='width: 200px;'>
        <van-cell  style="text-align: center;border-bottom: 1px solid #26C4FE" title="百度地图" @click='chooseMapDirt(1)' />
        <van-cell  style="text-align: center;border-bottom: 1px solid #26C4FE" title="腾讯地图" @click='chooseMapDirt(2)'/>
        <van-cell  style="text-align: center" title="高德地图" @click='chooseMapDirt(3)' />
      </van-list>
    </van-popup>
    <!--检索距离弹层-->
    <van-popup v-model="showDistance" style='width:90%'>
      <van-picker ref='boundVehicleSelectPlateColor'  show-toolbar title="选择搜索范围" :columns="columns" @cancel="hidenDist()" @confirm="okDist" />
    </van-popup>
  </div>
</template>

<script>
  import { nearParkInfo,getBaiduCoordinates,findWxUserInfo,saveGuidancePark} from '../../api/nearPark/nearPark'
  import {baseUrl} from 'config/index'
  import  geo from '../../utils/geolocation'
  import { Toast } from 'vant';
  import { Dialog } from 'vant';
  let geolocation = new geo("FYXBZ-5YDCW-ILWRQ-OOWLM-AJV7Z-QNFH7", "ZQwechat");
  export default {
    name: 'baimaiQuan',
    data() {
      return {
        imglist:[
          { src: require('./image/bmq1.jpg') },
          { src: require('./image/bmq2.jpg') },
          { src: require('./image/bmq3.jpg') }
        ],
        ZQcode:'',
        DHOpenid:'', // 导航记录
        DHPkNo:'', // 导航车场编号
        DHPKName: '', // 导航车场名称
        parkList:'', //车场信息
        chooseMap:false,
        startpaoint:'',//起点
        startPointGD:'',// 起点 高德
        startPointBD:'',//百度起点
        startCityBD:'', //起点城市
        endPointBD:'', //终点 百度
        endPoint:'',//终点 腾讯坐标
        endPointGD:'', //终点 高德坐标
        endPlacename:'',
        showDistance: false,
        searchKM:'', //搜索距离
        seachKMKey:'',
        columns:[
          { text: '搜索附近 1km   ',key:'1'} ,
          { text: '搜索附近 2km   ',key:'2'} ,
          { text: '搜索附近 3km   ',key:'3'} ,
          { text: '搜索附近 4km   ',key:'4'},
        ],
      };
    },
    mounted(){
      this.ZQcode=this.$route.query.code   //章丘code
      // ---用户信息
      findWxUserInfo(this.ZQcode).then((res)=>{
        this.DHOpenid=res.openid
      },(err)=>{
        console.log(err)
      })
      // 附近车场
      this.getNearPark()
      //定位
      this.MapGetLoation()
    },
    methods: {
      // 获取当前定位
      MapGetLoation() {
        geolocation.getLocation(this.getLoationOK, this.getLoationErr)
      },
      // 定位成功回调
      getLoationOK(position) {
        // ---根据坐标查询车场
        this.startpaoint=position.lat+','+position.lng  //当前点
        this.startPointGD=position.lng+','+position.lat  //高德坐标
        //---获取起点坐标  百度系
        getBaiduCoordinates(position.lng,position.lat).then((res)=>{
          this.startPointBD=res.lat+','+res.lng
        },(err)=>{
          // alert('请刷新页面重试')
        })
        //---获取地点所在地区
        this.startCityBD=position.city
      },
      // 定位失败回调
      getLoationErr(){
        Toast.fail('定位失败'); //提示
      },
      // 查看更多
      ReadMore() {
        window.location.href = 'https://baike.baidu.com/item/%E7%99%BE%E8%84%89%E6%B3%89';
      },
      //---周边车场
      getNearPark(){ // 百脉泉坐标 腾讯坐标
        nearParkInfo(117.538150,36.717260,1.00).then((res)=>{
          this.parkList=res
        })
      },
      //---- 预约车场
      reservePark(e){
        var _index=e.currentTarget.dataset.index
        //预约前判断
        //预约前判断
        //- 判断车场是否能预约
        if (this.parkList[_index].canBook==1 ) {
          Toast.fail('不支持预约')
          return;
        }else if(this.parkList[_index].remainderBerth<=0){
          Toast.fail('没有泊位了')
          return
        }
        //--- 页面跳转前判断用户信息
        var that=this
        findWxUserInfo(this.ZQcode).then((res)=>{
          debugger
          if(res.phoneNo==null ){  //如果手机号为空
            Dialog.confirm({
              title: '未绑定手机号',
              message: '<p style="text-align:center">当前微信未绑定手机号，是否绑定</p>',
            }).then(() => {
              // on confirm
              that.$router.push({  // 跳转到绑定手机号页面
                path:'/ReserveBindNo',
                query:{
                  code:that.ZQcode,
                  openid:res.openid
                }
              })
            }).catch(() => {
              // on cancel
              return
            });
          }else if(!(res.haveBindCar)){   //如果未绑定车辆
            Dialog.confirm({
              title: '未绑定车辆',
              message: '<p style="text-align:center">当前微信未绑定车辆。是否绑定</p>',
            }).then(() => {
              // on confirm
              that.$router.push({
                path:'/ReserveBindCar',  //跳转绑车页面
                query:{
                  code:that.ZQcode,
                  openid:res.openid
                }
              })
            }).catch(() => {
              // on cancel
              return
            });
          }else{  // 绑定信息  下一步
            // 页面跳转
            var  _codeUrl='http://wx.jinanparking.com/getCode.html?appid=wx7305253d6ea42110&scope=snsapi_base&state=wxPay&redirect_uri='
            var _redirectUrl=baseUrl+'/reservePark'
            var arr={
              parkNO:this.parkList[_index].parkNo,  //车场编号
              parkName:this.parkList[_index].parkName,  //车场编号
              getZQCode:this.ZQcode
            }
            var _params='?parkInfo='+JSON.stringify(arr)
            var _url=_codeUrl+_redirectUrl+_params
            window.location.href=_url
          }
        },(err)=>{  //如果页面么有code
          Toast.fail('刷新重试')
        })

      },
      //-- 导航
      MapDirect(e){
        var _index=e.currentTarget.dataset.index
        this.DHPkNo=this.parkList[_index].parkNo
        this.DHPKName= this.parkList[_index].parkName
        this.endPoint = this.parkList[_index].latitude + ',' + this.parkList[_index].longitude; // 腾讯系 坐标
        this.endPointBD = this.parkList[_index].baiduLatitude + ',' + this.parkList[_index].baiduLongitude; // 百度系 坐标
        this.endPointGD = this.parkList[_index].longitude + ',' + this.parkList[_index].latitude; // 高德度系 坐标
        this.endPlacename = this.parkList[_index].parkName;
        this.chooseMap=true
      },
      //---选择地图导航
      chooseMapDirt(key){
        //--- 上传导航记录  /{openId}/{parkNo}
        if(this.DHOpenid!=null){  //有openid
          saveGuidancePark(this.DHOpenid,this.DHPkNo,this.DHPKName).then()
        }
        switch (key){
          case 1:  //百度地图
            window.location.href='http://api.map.baidu.com/direction?origin='+this.startPointBD+'&origin_region='+this.startCityBD
              +'&destination='+this.endPointBD+'&destination_region=济南' +'&mode=driving&output=html&src=th.zq'
            break;
          case 2:
            window.location.href ='https://apis.map.qq.com/uri/v1/routeplan?type=drive&fromcoord=' +
              this.startpaoint + '&to=' + this.endPlacename + '&tocoord=' + this.endPoint + '&referer=ZQwechat'
            break;
          case 3:
            window.location.href='https://uri.amap.com/navigation?from='+this.startPointGD+ '&to='+this.endPointGD+
              '&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0'
            break;
        }
      },
      // 开启距离弹层
      shownDist(){
        this.showDistance=true;
      },
      // 关闭距离弹层
      hidenDist(){
        this.showDistance=false;
      },
      //确定距离
      okDist(value){
        this.searchKM=value.text
        //--查询数据
        nearParkInfo(117.538150,36.717260,value.key).then((res)=>{
          this.parkList=res
        })
        this.showDistance=false;
      },
    }
  }
</script>

<style scoped>
  .title{
    font-size: 20px;
    height: 24px;
    line-height: 24px;
    margin: 15px auto;
    margin-left: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .content{
    font-size: 13px;
    line-height: 25px;
    text-indent:2em;
    word-break:break-all;
  }
  .wenwu{
    margin-top: 25px;
    margin-bottom: 40px;
  }
  .icon-group{
    display: flex;
    flex-direction: row;
    justify-content: center;
    justify-items: center;
  }
  .icon-iten{
    margin: 5px;
    font-size: 15px;
    color:#4798FD;
  }
  .yuyue{
    margin-right: 8px;
  }
  .daohang{
    margin-left: 8px;
    margin-right:-20px;
  }
  .bound-veh-field-picker{
    padding: 0px;
    display: inline-block;
    width: 46%;
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
  }
</style>
